<template>
    <!-- 吸顶标题 -->
    <van-sticky>
        <van-nav-bar title="首页" />
    </van-sticky>
    <!-- 搜索 -->
    <van-search v-model="value" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />
    <!-- 轮播 -->
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image.goods_id">
            <img width="100%" height="180px" :src="image.image_src" />
        </van-swipe-item>
    </van-swipe>
    <!-- 导航 -->
    <div class="gongge">
        <div v-for="item in gongge">
            <img width="100%" :src="item.image_src" alt="">
        </div>
    </div>
    <!-- 楼层 -->
     <div v-for="item in floorList">
        <img width="100%" :src="item.floor_title.image_src" alt="">
        <div class="floorimg">
            <div >
                <img width="100%" height="200px" :src="item.image_src" alt="">
            </div>
        </div>
     </div>
</template>

<script setup>
import { ref } from "vue";
import axios from 'axios' 

// 轮播
const images = ref([]);
axios.get("https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata").then(res => {
    images.value = res.data.message
})
// 导航
const gongge = ref([]);
axios.get("https://api-hmugo-web.itheima.net/api/public/v1/home/catitems").then(res => {
    gongge.value = res.data.message
})
// 楼层
const floorList = ref([]);
axios.get("https://api-hmugo-web.itheima.net/api/public/v1/home/floordata").then(res => {
    floorList.value = res.data.message
})
</script>

<style lang="scss" scoped>
.gongge{
    display: flex;
}
.gongge >div{
    width: 100%;
}
.floorimg{
    display: flex;
    flex-wrap: wrap;
}
.floorimg>div{
    flex: 1;
}
.floorimg>div>img{
    width: 100%;
}
</style>